<template>
  <div class="table">
    <div class="table_top">
      <div class="table_top_L">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="类型">
            <el-select v-model="type" @change="handleTypeChange" style="width: 120px">
              <el-option label="教练" :value="0"></el-option>
              <el-option label="球员" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="参赛人员名称">
            <el-input v-model="formInline.name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="联赛id">
            <el-select v-model="formInline.contestId" placeholder="联赛id" clearable>
              <el-option v-for="option in tableData1" :key="option.value" :label="option.label" :value="option.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="inquire">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="openAddDialog">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="tableData"
      width="10%"
      height="100%"
      border
      stripe
      highlight-current-row
      v-loading="listLoading"
      ref="table"
      current-row-key="id"
      row-key="id"
      key="id"
      column-key="id"
      @selection-change="selectionChange"
    >
      <el-table-column prop="id" label="人员id" width="60"></el-table-column>
      <el-table-column prop="name" label="参赛人"></el-table-column>
      <el-table-column prop="phone" label="联系方式"></el-table-column>
      <el-table-column prop="contestName" label="联赛名称"></el-table-column>
      <el-table-column prop="teamName" label="球队名称"></el-table-column>
      <el-table-column prop="auditStatusName" label="审核状态"></el-table-column>
      <!-- <el-table-column label="auditStatus">
        <template slot-scope="scope">
          <img :src="scope.row.logo" alt="" style="height: 50px; width: auto;" />
        </template>
      </el-table-column>  paymentStatus-->
      <el-table-column prop="paymentStatusName" label="支付状态"></el-table-column>
      <el-table-column prop="address" label="邮寄地址"></el-table-column>
      <el-table-column prop="size" label="尺码"></el-table-column>
      <el-table-column label="参赛证明">
        <template slot-scope="scope">
          <div v-if="scope.row.competeProve">
            <div v-for="(item, index) in scope.row.competeProve.split(',')" :key="index">
              <el-image style="width: 50px; height: 50px; cursor: pointer;" :src="item" :preview-src-list="[item]" fit="cover"> </el-image>
            </div>
          </div>
          <div v-else>
            暂无
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="emergencyPhone" label="紧急联系人联系方式"></el-table-column>
      <el-table-column label="礼包名称">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.giftName" :key="index">{{ item }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <div style="display: flex;">
            <el-button type="success" size="small" style="margin: 0 20px;" @click="edit(scope.row)">审核</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增对话框 -->
    <el-dialog title="新增礼包" :visible.sync="addDialogVisible">
      <el-form :model="newBanner" ref="addForm">
        <el-form-item label="审核" prop="status" required>
          <el-radio-group v-model="newBanner.status">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeBanner">取 消</el-button>
        <el-button type="primary" @click="addNewBanner">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { packDelete, contestListDown, uploadPhoto, coachOrPlayerList, coachOrPlayerAudit } from '@/api/table'

export default {
  data() {
    return {
      tableData1: [],
      tableData: [],
      listLoading: true,
      form: {
        contestId: '',
        logo: '',
        // amount: '',
        name: ''
      },
      formInline: {
        id: '',
        contestId: ''
        // state: ''
      },
      newBanner: {
        // 新增的 Banner 数据
        name: '',
        contestId: '',
        logo: ''
        // amount: ''
      },
      uploadUrl: '',
      isLoading: false,
      uploadHeaders: {
        Authorization: '' // 替换为你的鉴权令牌
      },
      total: 0, // 添加总条数
      addDialogVisible: false, // 控制视频弹窗的显示与隐藏
      videoList: [], // 存储视频列表数据
      previewImage: '', // 用于存储预览图片的 URL
      showPreview: false, // 控制预览对话框的显示
      type: 0 // 新增：0 教练，1 球员
    }
  },
  mounted() {
    this.reqData1()
    this.reqData()
    this.listLoading = false
  },
  methods: {
    // 新增：类型切换时刷新数据
    handleTypeChange() {
      // this.reqData1()
      this.reqData()
    },
    async handleFileChange(event) {
      const file = event.target.files[0]
      if (!file) return

      this.isLoading = true // 开始加载

      // 使用 FileReader 来读取文件并生成预览图
      const fileReader = new FileReader()
      fileReader.onload = temp => {
        this.uploadUrl = temp.target.result
      }
      fileReader.readAsDataURL(file)

      const formData = new FormData()
      formData.append('file', file) // 'file' 为后端接收的字段名

      try {
        const response = await uploadPhoto(formData)
        console.log(response)
        this.newBanner.logo = response.msg
        this.$message.success('图片上传成功！')
      } catch (error) {
        this.$message.error('图片上传失败！')
      } finally {
        this.isLoading = false // 上传完成，结束加载
      }
    },

    openAddDialog() {
      this.addDialogVisible = true // 打开对话框
      this.resetNewBanner() // 重置表单数据
      this.$refs.fileInput.value = null
    },
    edit(row) {
      this.resetNewBanner() // 重置表单数据
      this.addDialogVisible = true // 打开对话框
      if (row.logo) {
        this.uploadUrl = `${row.logo}`
      } else {
        this.$refs.fileInput.value = null
      }
      //
      this.newBanner = row
      if (this.newBanner.logo.includes('https://boyubasketball.oss-cn-shanghai.aliyuncs.com/')) {
        this.newBanner.logo = `${row.logo.split('https://boyubasketball.oss-cn-shanghai.aliyuncs.com/')[1]}`
      } else {
        this.newBanner.logo = `${row.logo}`
      }
    },
    closeBanner() {
      this.addDialogVisible = false
      this.uploadUrl = ''
      this.$refs.fileInput.value = null
    },
    resetNewBanner() {
      this.newBanner = {
        name: '',
        contestId: '',
        logo: '',
        amount: ''
      }
    },
    inquire() {
      this.reqData(1, 10000, {
        name: this.formInline.name,
        // state: this.formInline.state,
        contestId: this.formInline.contestId,
        type: this.type // 新增
      })
    },
    inquire1() {
      this.reqData(1, 10000, {
        contestId: this.newBanner.contestId,
        type: this.type // 新增
      })
    },
    selectionChange(selection) {
      this.selectionLength = selection.length
    },
    addNewBanner() {
      // if (this.newBanner.id) {
      //   // 编辑
      //   await packModify(this.newBanner)
      // } else {
      //   // 新增
      //   await packSave(this.newBanner)
      // }
      // this.addDialogVisible = false
      // this.uploadUrl = ''
      // this.inquire1()
      coachOrPlayerAudit({
        type: this.type,
        id: this.newBanner.id,
        status: this.newBanner.status
      })
        .then(() => {
          this.inquire1()
          this.inquire()
          this.addDialogVisible = false
        })
        .catch(err => {
          // this.inquire1()
          // this.inquire()
          // this.addDialogVisible = false
          console.log(err)
          this.$message.error('接口异常失败')
        })
    },
    // 请求
    reqData(pageNum = 1, pageSize = 10000, query = {}) {
      const params = { pageNum, pageSize, type: this.type, ...query } // 新增 type
      coachOrPlayerList(params).then(async res => {
        const promises = res.rows.map(async item => {
          // 根据需要拼接 URL
          item.logo = `https://boyubasketball.oss-cn-shanghai.aliyuncs.com/${item.logo}`
          return item
        })
        this.tableData = await Promise.all(promises)
      })
    },
    reqData1(pageNum = 1, pageSize = 10000, query = {}) {
      const params = { pageNum, pageSize, type: this.type, ...query } // 新增 type
      contestListDown(params).then(res => {
        this.tableData1 = res.data.map(item => ({
          value: item.id,
          label: item.name // 假设 id 是数字类型
        }))
      })
    },
    async del(id) {
      try {
        await packDelete(id)
        this.inquire()
      } catch (e) {
        alert('删除失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  display: flex;
  flex-flow: column;
  box-sizing: border-box;

  .table_top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;

    .table_top_L {
      text-align-last: left;
      flex: 1;
      overflow: hidden;
    }
  }

  .table_bottom {
    margin-top: 10px;
  }

  height: 100%;
}
</style>
<style>
.table .el-table {
  transition: all ease-in-out 0.3s;
}

.table .el-table td,
.table .el-table th {
  text-align: center;
}

.table .el-dialog {
  text-align: left;
}

.table .el-dialog .line {
  text-align: center;
}

.el-image-viewer__close {
  background-color: #fff;
}

/* 重新覆盖原来的样式，原来的样式是.el-drawer获取焦点时的outline */
.el-image-viewer__wrapper:focus {
  outline: none;
}
</style>
